<template>
  <div style="height: 100%; background: #f1f1f1; padding: 16px">
    <div class="wrap">
      <commonCollapse :title="title1">
        <template v-slot:content>
          <div>自定义折叠区内容</div>
        </template>
      </commonCollapse>
      <commonCollapse :title="title2">
        <template v-slot:headRight>
          <div class="btn-group">
            <el-button type="text" size="small">按钮1</el-button>
            <el-button type="text" size="small">按钮2</el-button>
          </div>
        </template>
        <template v-slot:content>
          <div>自定义折叠区内容</div>
        </template>
      </commonCollapse>
    </div>
  </div>
</template>

<script>
import CommonCollapse from "./index.vue";
export default {
  components: {
    CommonCollapse,
  },
  name: "Collapse",
  data() {
    return {
      title1: "折叠的头部文字",
      title2: "<span style='color:red '>头部html代码块-右侧加按钮</span>",
    };
  },
};
</script>

<style scoped>
.wrap {
  background: #fff;
  padding: 16px;
}
</style>
